<template>
    <div>
        <div id="leftNavi">
            <div class="content" >
                <div>L</div>

                <router-link to="/main/home">
                    <img src="../../assets/image/Group28.png">
                </router-link>

                <router-link to="/main/money">
                    <img src="../../assets/image/Group29.png">
                </router-link>

                <router-link to="/main/about">
                    <img src="../../assets/image/Group33.png">
                </router-link>

                <router-link to="/">
                    <img src="../../assets/image/Group37.png">
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>
    #leftNavi{
    background-color: #373B4E;
    width: 5%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
}

#leftNavi .content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#leftNavi .content div{
    margin-top: 20px;
    font-size: 30px;
    font-weight: bold;
    color: white;
}

#leftNavi .content img{
    width: 25px;
    height: 25px;
    margin-top: 45px;
}

.iconActive{
    color: aquamarine
}
</style>